<script setup lang="ts">
// import MapShow from '@/components/MapShow'
// import TrackingDrawer from '@/components/TrackingDrawer.vue'
// import VideoShow from '@/components/VideoShow'
import {
  // useHistory,
  // useInternational,
  useLogout
  // useManagement,
  // useNotification,
  // useTheme
} from '@/composables'
// import { useSwitchComponents } from '@/stores/switchComponents'
import { RouterView, useRouter, useRoute } from 'vue-router'
// import { version } from '../../package.json'
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import Icon from '@/components/Icon.vue'
import MenuDrawer from '@/components/MenuDrawer.vue'

// const { HistoryController } = useHistory()
const { LogoutController } = useLogout()
// const { NotificationDrawer } = useNotification()
// const { ThemeController } = useTheme()
// const { InternationalController } = useInternational()
// const { PermissonManagement } = useManagement()
// const switchComponents = useSwitchComponents()

const menuDrawerRef = ref()
const router = useRouter()
const route = useRoute()
const nameValue = ref()
const options = [
  {
    label: '操控端',
    value: 1
  },
  {
    label: '机器人管理',
    value: 2
  },
  {
    label: '资源管理',
    value: 3
  },
  {
    label: '地图设置',
    value: 4
  }
]
const selectPathWay = (v: number) => {
  if (v === 2) {
    router.push('/inspection/robot-manage')
  }
  if (v === 1) {
    router.push('/inspection/control-home')
  }
  if (v === 3) {
    router.push('/inspection/resource-manage')
  }
  if (v === 4) {
    router.push('/inspection/map-setting')
  }
}
</script>

<template>
  <el-container class="h-screen flex flex-col">
    <el-header class="header-container bg-[var(--el-bg-color)]">
      <div class="flex items-center justify-between h-full">
        <div class="flex items-center">
          <el-button type="primary" @click="menuDrawerRef?.toggleDrawer()">
            <Icon icon="mdi:menu" class="text-xl" />
          </el-button>
        </div>
        <div><LogoutController /></div>
      </div>
    </el-header>
    <MenuDrawer ref="menuDrawerRef" />
    <div v-if="route.path.includes('/inspection')">
      <el-segmented v-model="nameValue" :options="options" block @change="selectPathWay">
        <template #default="scope">
          <div class="">
            <div>{{ scope.item.label }}</div>
          </div>
        </template>
      </el-segmented>
    </div>

    <!-- 围界车主页 -->
    <el-main>
      <RouterView v-slot="{ Component }">
        <component :is="Component" />
      </RouterView>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.dark #container {
  background-color: #072232;
}
:deep(.maptalks-attribution) {
  display: none !important;
}
.header-container {
  // background-color: #072232;
  color: white;
}
</style>
